<!--
  功能：功能描述
  作者：Maoxiangdong
  邮箱：862755519@qq.com
  时间：2023年09月14日 13:11:37
-->
<template>
  <div class="login-container">
    <t-row>
      <t-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="login-right-box">
          <div class="login-card">
            <div class="login-card-title">欢迎登录</div>
            <div class="login-card-sub-title">企业级中台管理系统</div>
            <t-form labelWidth="0px" class="login-card-form" ref="loginRef" :requiredMark="false" :data="loginForm"
              :rules="loginRules" @submit="handleLogin">
              <t-form-item v-if="alertState">
                <div class="login-alert">
                  <div class="login-alert-title">登录失败</div>
                  <div class="login-alert-desc">账号或密码错误，请重新登录！</div>
                </div>
              </t-form-item>
              <t-form-item name="username">
                <t-input clearable size="large" placeholder="请输入登录账号" v-model="loginForm.username">
                  <template #prefix-icon>
                    <i class="iconfont diannao-xianxing" style="color: #808695; font-size: 18px;"></i>
                  </template>
                </t-input>
              </t-form-item>

              <t-form-item name="password">
                <t-input type="password" size="large" placeholder="请输入登录密码" v-model="loginForm.password">
                  <template #prefix-icon>
                    <i class="iconfont suo1-xianxing" style="color: #808695; font-size: 19px;"></i>
                  </template>
                </t-input>
              </t-form-item>

              <t-form-item>
                <div class="login-card-form-item">
                  <t-checkbox v-model="loginForm.isRemember">
                    <span style="color: #515a6e;">记住密码</span>
                  </t-checkbox>
                  <span>没有账号？</span>
                </div>
              </t-form-item>

              <t-form-item>
                <t-button theme="primary" :loading="loginLoading" type="submit" size="large" block>{{ loginLoading
                  ? "登录中.." : "登录" }}</t-button>
              </t-form-item>
              <div style="width: 100%;">
                <t-divider>其他登录方式</t-divider>
              </div>
              <div class="login-type">
                <div class="type-item">
                  <SvgIcon type="qq" :size="35" style="margin: auto;" />
                  <div>微信</div>
                </div>
                <div class="type-item">
                  <SvgIcon type="wechat" :size="35" style="margin: auto;" />
                  <div>微信</div>
                </div>
                <div class="type-item">
                  <SvgIcon type="weibo" :size="35" style="margin: auto;" />
                  <div>微信</div>
                </div>
              </div>
            </t-form>
          </div>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, onBeforeUnmount } from "vue";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import { useRouter } from "vue-router";
import { MessagePlugin } from 'tdesign-vue-next';
import useUserStore from "@/store/modules/user";
const router = useRouter();
const userStore = useUserStore();
//登录表单
const loginForm = reactive({
  username: "",
  password: "",
  isRemember: false,
});
const loginRef = ref(null);
// 登录失败提示
const alertState = ref(false);
//表单验证
const loginRules = reactive({
  username: [
    { required: true, message: '登录账号不能为空', type: 'error', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '登录密码不能为空', type: 'error', trigger: 'blur' },
  ],
});
//登录状态
const loginLoading = ref(false);
//跳转登录来源
const redirect = ref(null);
//回车登录
const onKeyDown = (e) => {
  if (e.keyCode == 13) {
    handleLogin();
  }
};

//处理登录
const handleLogin = ({ validateResult, firstError, e }) => {
  e.preventDefault();
  if (validateResult) {
    loginLoading.value = true;
    // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
    if (loginForm.isRemember) {
      Cookies.set("username", loginForm.username, { expires: 30 });
      Cookies.set("password", encrypt(loginForm.password), { expires: 30 });
      Cookies.set("isRemember", loginForm.isRemember, { expires: 30 });
    } else {
      // 否则移除
      Cookies.remove("username");
      Cookies.remove("password");
      Cookies.remove("isRemember");
    }
    // 调用action的登录方法
    userStore
      .login(loginForm)
      .then((res) => {
        loginLoading.value = false;
        const { code, message } = res;
        if (code == 200) {
          MessagePlugin.success("登录成功正在跳转");
          setTimeout(() => {
            alertState.value = false;
            router.push({ path: redirect.value || "/" });
          }, 300);
        } else {
          MessagePlugin.error(message || "登录失败");
          alertState.value = true;
        }
      })
      .catch(() => { });
  } else {
    MessagePlugin.error(firstError);
    loginLoading.value = false;
  }
};
const getCookie = () => {
  const username = Cookies.get("username");
  const password = Cookies.get("password");
  const isRemember = Cookies.get("isRemember");
  loginForm.username = username ? username : "",
    loginForm.password = password ? decrypt(password) : "",
    loginForm.isRemember = isRemember ? Boolean(isRemember) : false;
};
//监听路由变化
watch(
  () => router.currentRoute.value,
  (route) => {
    redirect.value = route.query && route.query.redirect;
  },
  { immediate: true, deep: true }
);
//onMounted
onMounted(() => {
  window.addEventListener("keydown", onKeyDown);
});
//onBeforeUnmount
onBeforeUnmount(() => {
  window.removeEventListener("keydown", onKeyDown, false);
});
getCookie();
</script>

<style scoped lang="less">
.login-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url("@/assets/images/login_bg.png");
  background-size: 100% 100%;

  .login-right-box {
    height: 100vh;
    position: relative;

    .login-card {
      width: 500px;
      padding: 40px;
      background-color: #fff;
      box-shadow: 0 0px 10px 0px rgba(30, 30, 30, 0.1);
      border-radius: 10px;
      position: absolute; // 绝对定位
      top: 50%;
      left: 50%;
      transform: translate(-50%, -55%);
      text-align: center;

      &-title {
        font-size: 26px;
        color: #17233d;
      }

      &-sub-title {
        font-size: 20px;
        color: #515a6e;
        margin-top: 20px;
      }

      &-form {
        margin-top: 40px;
        text-align: left;
      }

      &-form-item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #515a6e;
        font-size: 14px;

        span:hover {
          color: var(--td-brand-color);
          cursor: pointer;
        }
      }

      .login-type {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .type-item {
          width: 33%;
          text-align: center;
          font-size: 14px;
          color: #515a6e;

          div {
            margin-top: 10px;
          }
        }
      }
    }
  }

  .login-alert {
    border: 1px solid red;
    padding: 15px;
    border: 1px solid #ffb08f;
    background-color: #ffefe6;
    border-radius: 4px;
    text-align: left;
    width: 100%;
    &-title {
      color: #515a6e;
      font-size: 18px;
    }

    &-desc {
      color: #515a6e;
      font-size: 14px;
      margin-top: 6px;
    }
  }
}

// 是手机设备
@media screen and (max-width: 680px) {
  .login-container {
    background-size: cover !important;
    background-image: none !important;
    background-color: #fff !important;
  }

  .login-card {
    width: 100vw !important;
    height: 100vh !important;
    padding-top: 15vh !important;
    box-shadow: none !important;
  }
}
</style>
